<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS显示类型说明(Cascading Style Sheets Display Type Description)</title>
  <!-- 
    CSS中的行内（inline）、块级（block）、行内块（inline-block）是用来定义元素在页面上的显示方式的三种常见属性。以下是关于这三种属性的文字说明总结： 
 
      1. 行内（inline）元素： 
        - 行内元素会在同一行内显示，不会独占一行。 
        - 行内元素的宽度和高度由内容决定，无法设置固定的宽度和高度。 
        - 例如： <span> ,  <a> ,  <strong>  等元素通常被定义为行内元素。 
      
      2. 块级（block）元素： 
        - 块级元素会独占一行显示，会从新行开始。 
        - 块级元素的宽度默认是100%，可以设置固定的宽度和高度。 
        - 例如： <div> ,  <p> ,  <h1>  等元素通常被定义为块级元素。 
      
      3. 行内块（inline-block）元素： 
        - 行内块元素会在同一行内显示，但可以设置宽度和高度。 
        - 行内块元素可以包含文本和其他元素，且可以设置内外边距。 
        - 例如： <img> ,  <input> ,  <button>  等元素通常被定义为行内块元素。 
   -->
   <style>
    /* 修改元素类型 */
    .type-description {
      height: 120px;
      background-color: saddlebrown;
      color: black;

      /* 修改元素特性: 层叠 */
      display: inline;
    }

    /* 行内元素-设置宽高无效 */
    span {
      background-color: salmon;
      width: 200px;
      height: 200px;
    }

    /* 块级和行内块元素-可设置宽高 */
    .default-type {
      background-color: sandybrown;
      width: 200px;
      height: 200px;
    }

    img {
      height: 200px;
      height: 150px;
    }

    input {
      height: 60px;
    }
   </style>
</head>
<body>

  <!-- 块级元素 -->
  <div>这是一个块级元素-div</div>
  <!-- 行内元素 -->
  <p>这是一个行内元素-p</p>
  <span>这是一个行内元素-span</span>
  <a href="#">这是一个行内元素-a</a>
  <!-- 行内块元素 -->
  <img src="../../images/gouwujie01.jpg" alt="图片">
  <input type="text" placeholder="这是一个行内块元素">
  <button>这是一个行内块元素-button</button>
  
  <!-- 修改元素类型 -->
  <div class="type-description">
    type-description-div-to-inline
  </div>

  <div class="default-type">
    default-type-div
  </div>

</body>
</html>